<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-model="num">
        <button v-on:click="num++">关注</button>
        <!-- 通过插值表达式 {{}} 用来取值，插值表达式只能用在标签中间 -->
        <h1>{{name}}非常甚至very的帅</h1>
    </div>
    <!-- 引入vue，各版本介绍参考官网链接 https://v2.cn.vuejs.org/v2/guide/installation.html#%E5%AF%B9%E4%B8%8D%E5%90%8C%E6%9E%84%E5%BB%BA%E7%89%88%E6%9C%AC%E7%9A%84%E8%A7%A3%E9%87%8A -->
    <script src="../node_modules/vue/dist/vue.min.js"></script>
    <script>

        let vm = new Vue({
            el: "#app", // 是 element 的缩写，通过 id 选中要渲染的页面元素，即id为app的标签对应的div下的所有元素都可以通过这个vue实例进行渲染
            data: { // data 数据是一个对象，里面有很多属性，都可以渲染到视图中
                name: "杨皮猪", // 数据的属性 name 为杨皮猪
                num: 1
            }
        });
    </script>
</body>
</html>